<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

// 新闻分类
const categories = ref([
  { id: 1, name: '景区动态' },
  { id: 2, name: '文化活动' },
  { id: 3, name: '美食推荐' },
  { id: 4, name: '旅游攻略' }
])

// 当前选中的分类
const currentCategory = ref(categories.value[0].id)

// 新闻列表
const newsList = ref([
  {
    id: 1,
    category: 1,
    title: '开元寺举办春季祈福法会',
    cover: 'https://img0.baidu.com/it/u=3687813568,4004761561&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=428', 
    summary: '泉州开元寺将于本月举办春季祈福法会，欢迎市民游客参加...',
    date: '2024-03-10',
    views: 1280
  },
  {
    id: 2,
    category: 2,
    title: '2024泉州国际南音文化节即将开幕',
    cover: 'https://img-plus.fjtv.net/20241219d32729f51ec29ede085281e0e005356a.jpg',
    summary: '第十届泉州国际南音文化节将于下月在泉州举行，多个国家艺术家将齐聚泉州...',
    date: '2024-03-08',
    views: 2156
  },
  {
    id: 3,
    category: 3,
    title: '泉州特色小吃文化节开幕',
    cover: 'https://www.qzsysg.cn/upload/default/20250122/e14b596ec312ada7737f0ceeebb21907.jpg',
    summary: '第五届泉州特色小吃文化节在西街举行，汇集数百种闽南特色美食...',
    date: '2024-03-05',
    views: 1890
  },
  {
    id: 4,
    category: 4,
    title: '泉州古城文化之旅攻略',
    cover: 'https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%27LV8xNzMxMjQyNjUwLjQ3MDU5NjhfMTczMTI0MjY1MC43NzY0MDYz%27/1.png',
    summary: '深度解读泉州古城文化景点，带您领略千年古城的魅力...',
    date: '2024-03-01',
    views: 3420
  }
])

// 根据分类筛选新闻
const filteredNews = computed(() => {
  return currentCategory.value === 0 
    ? newsList.value
    : newsList.value.filter(news => news.category === currentCategory.value)
})

onMounted(() => {
  const cards = document.querySelectorAll('.news-card');
  cards.forEach((card, index) => {
    (card as HTMLElement).style.animationDelay = `${index * 0.1 + 0.5}s`; // 调整动画延迟，使其在标题动画后开始
  });

  // 为标题字符添加动画类，确保动画在挂载后执行
  const titleSpans = document.querySelectorAll('.main-title span');
  titleSpans.forEach((span, index) => {
    (span as HTMLElement).style.animationDelay = `${index * 0.1}s`;
  });
});
</script>

<template>
  <div class="news-page-wrapper">
    <div class="news-container">
      <!-- 动态标题头 -->
      <header class="news-header">
        <h1 class="main-title">
          <span>旅</span><span>游</span><span>资</span><span>讯</span>
        </h1>
        <p class="subtitle">探索世界，发现未知</p>
      </header>

    <!-- 分类导航 -->
    <div class="categories">
      <button
        v-for="category in categories"
        :key="category.id"
        :class="['category-btn', { active: currentCategory === category.id }]"
        @click="currentCategory = category.id"
      >
        {{ category.name }}
      </button>
    </div>

      <!-- 新闻列表 -->
      <section class="news-list">
        <article v-for="(news, index) in filteredNews" :key="news.id" class="news-card" :style="{ '--card-index': index }">
          <div class="news-image-wrapper">
            <img :src="news.cover" :alt="news.title" class="news-image-content">
          </div>
          <div class="news-content">
            <h3 class="news-title">{{ news.title }}</h3>
            <p class="news-summary">{{ news.summary }}</p>
            <div class="news-meta">
              <span class="news-date">{{ news.date }}</span>
              <span class="news-views">{{ news.views }} 阅读</span>
            </div>
            <button class="read-more-btn">阅读全文</button>
          </div>
        </article>
      </section>
    </div>
  </div>
</template>

<style scoped>
@keyframes titleCharBounce {
  0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(-12px) scale(1.15); opacity: 0.85; }
}

@keyframes cardEntry {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fadeInFromBottom { /* 保留原有的 fadeInFromBottom 供标题使用 */
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes subtitleFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.news-page-wrapper {
  background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
  min-height: 100vh; /* 确保背景覆盖整个视口高度 */
}

.news-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 20px; /* 增加顶部内边距 */
}

.news-header {
  text-align: center;
  margin-bottom: 60px; /* 增加与分类的间距 */
  animation: fadeInFromBottom 0.8s ease-out backwards; /* 标题区域整体入场动画 */
}

.main-title {
  font-size: 3.8rem; /* 进一步增大标题字号 */
  font-weight: 700; /* 更粗的字重 */
  color: #1f3c58; /* 更深的蓝灰色 */
  margin-bottom: 20px; /* 增加与副标题的间距 */
  letter-spacing: 3px; /* 调整字间距 */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* 添加轻微文本阴影 */
}

.main-title span {
  display: inline-block;
  animation: titleCharBounce 1.8s ease-in-out infinite; /* 调整动画时长和缓动函数 */
  /* 移除这里的 animation-delay，改为在 onMounted 中设置 */
}




.subtitle {
  font-size: 1.3rem; /* 增大副标题字号 */
  color: #4a6572; /* 调整副标题颜色 */
  animation: subtitleFadeIn 1.2s ease-out 0.8s backwards; /* 调整动画参数 */
}

.categories {
  display: flex;
  justify-content: center;
  gap: 25px; /* 进一步增大按钮间距 */
  margin-bottom: 50px; /* 进一步增大与新闻列表的间距 */
  overflow-x: auto;
  padding: 10px 0 20px; /* 调整内边距，为滚动条和阴影预留空间 */
  /* 隐藏滚动条，但保留滚动功能 */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.categories::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.category-btn {
  padding: 14px 32px; /* 进一步增大按钮内边距 */
  border: none; /* 移除边框 */
  border-radius: 50px; /* 更圆润的胶囊形状 */
  background: #ffffff; /* 白色背景 */
  color: #34495e; /* 深蓝灰色文字 */
  font-weight: 600; /* 加粗字体 */
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 更具弹性的过渡效果 */
  white-space: nowrap;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* 更明显的阴影 */
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.category-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%); /* 渐变背景 */
  transition: width 0.35s ease-out;
  z-index: -1;
  border-radius: 50px;
}

.category-btn:hover {
  transform: translateY(-4px) scale(1.05); /* 悬浮时效果增强 */
  color: white;
  box-shadow: 0 10px 25px rgba(0, 120, 255, 0.3); /* 更柔和的蓝色阴影 */
}

.category-btn:hover::before {
  width: 100%;
}

.category-btn.active {
  background: transparent; /* 透明背景，让伪元素显示 */
  color: white;
  box-shadow: 0 6px 18px rgba(0, 120, 255, 0.35); /* 激活状态的阴影 */
  transform: scale(1.08) translateY(-2px); /* 激活时更明显的放大和上移 */
}

.category-btn.active::before {
  width: 100%;
  background: linear-gradient(45deg, #007bff 0%, #00d4ff 100%); /* 激活状态的渐变 */
}

.news-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); /* 调整最小宽度 */
  gap: 35px; /* 增大卡片间距 */
}

.news-card {
  background: #ffffff;
  border-radius: 20px; /* 更大的圆角 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07); /* 更柔和且弥散的阴影 */
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 平滑过渡效果 */
  display: flex;
  flex-direction: column;
  animation: cardEntry 0.7s ease-out backwards; /* 使用新的卡片入场动画 */
  /* animation-delay 通过 onMounted 设置 */
  position: relative; /* 为悬浮效果的伪元素定位 */
}

.news-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease-out;
}

.news-card:hover {
  transform: translateY(-10px); /* 悬浮时上移 */
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); /* 增强阴影 */
}

.news-card:hover::after {
  transform: scaleX(1);
}

.news-image-wrapper {
  width: 100%;
  height: 240px; /* 增加图片高度 */
  overflow: hidden;
  border-bottom: 1px solid #eee; /* 图片和内容之间的细微分隔 */
}

.news-image-content {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.215, 0.610, 0.355, 1); /* 图片放大效果，更平滑的缓动 */
}

.news-card:hover .news-image-content {
  transform: scale(1.08); /* 悬浮时图片放大，幅度稍小 */
}

.news-content {
  padding: 25px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background-color: #fff; /* 确保内容区域背景为白色 */
}

.news-title {
  font-size: 1.5rem; /* 增大标题字号 */
  color: #2c3e50; /* 深蓝灰色 */
  margin-bottom: 12px;
  line-height: 1.45;
  font-weight: 600;
  /* 多行文本溢出显示省略号 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: calc(1.5rem * 1.45 * 2); /* 确保两行的高度 */
}

.news-summary {
  font-size: 1rem; /* 增大摘要字号 */
  color: #555;
  line-height: 1.7;
  margin-bottom: 20px;
  flex-grow: 1;
  /* 多行文本溢出显示省略号 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: calc(1rem * 1.7 * 3); /* 确保三行的高度 */
}

.news-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem; /* 增大元信息字号 */
  color: #777;
  padding-top: 15px;
  margin-top: auto; /* 将元信息推到内容区域底部 */
  border-top: 1px solid #f0f0f0; /* 更细微的分隔线 */
}

.news-date, .news-views {
  display: flex;
  align-items: center;
  gap: 6px;
}

.read-more-btn {
  align-self: flex-start; /* 左对齐 */
  margin-top: 15px;
  padding: 8px 18px;
  background: linear-gradient(45deg, #007bff, #00d4ff);
  color: white;
  border: none;
  border-radius: 20px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
}

.read-more-btn:hover {
  background: linear-gradient(45deg, #0069d9, #00b8e6);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
  transform: translateY(-2px);
}

/* 响应式调整 */
@media (max-width: 992px) {
  .news-list {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

@media (max-width: 768px) {
  .main-title {
    font-size: 3rem;
  }
  .subtitle {
    font-size: 1.1rem;
  }
  .category-btn {
    padding: 12px 25px;
    font-size: 0.95rem;
  }
  .news-title {
    font-size: 1.3rem;
    min-height: calc(1.3rem * 1.45 * 2);
  }
  .news-summary {
    font-size: 0.95rem;
    min-height: calc(0.95rem * 1.7 * 3);
  }
  .news-image-wrapper {
    height: 200px;
  }
  .news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
  }
  .news-card:hover::after {
    transform: scaleX(1);
  }
}

@media (max-width: 480px) {
  .news-container {
    padding: 30px 15px;
  }
  .main-title {
    font-size: 2.5rem;
    letter-spacing: 2px;
  }
  .news-header {
    margin-bottom: 40px;
  }
  .categories {
    gap: 15px;
    margin-bottom: 30px;
    padding: 5px 0 15px;
  }
  .category-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
  }
  .news-list {
    gap: 25px;
  }
  .news-card {
    border-radius: 15px;
  }
  .news-content {
    padding: 20px;
  }
  .news-title {
    font-size: 1.2rem;
    min-height: calc(1.2rem * 1.45 * 2);
  }
  .news-summary {
    font-size: 0.9rem;
    min-height: calc(0.9rem * 1.7 * 3);
  }
  .news-meta {
    font-size: 0.85rem;
    padding-top: 10px;
  }
  .read-more-btn {
    padding: 7px 15px;
    font-size: 0.9rem;
  }
}
</style>